<template>
    <div>
        <van-sticky>
            <van-search v-model="findString" placeholder="找找感兴趣的书" @search="onSearch" />
        </van-sticky>
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in articleHeadList" :key="item.articleNumber" @click="onClick(item)">
                <div :style="{backgroundImage:'url('+item.pictureUrl+')'}" style="text-align:center;margin:0 auto;height:180px;background-size:100% 100%;">
                    <div style="heigth:180px;line-height:180px;color:white;font-size:20px">{{item.title}}</div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <van-divider />
        <article-list articleIs="home"></article-list>
    </div>
</template>

<script>
import articleList from '../components/articleList.vue'
export default {
    name: 'editorElem',
    components: {
        articleList
    },
    data() {
        return {
            findString: '',
            list: [],
            articleHeadList: [],
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData() {
            let res = await this.$http.getArticleListByTop()
            this.articleHeadList = res.data
        },
        onSearch(val) {
            this.$router.push({
                path: this.redirect || '/articleList', query: {
                    findString: val
                }
            })
        },
        onClick(item) {
            window.console.log(item)
            this.$router.push({
                path: this.redirect || '/article', query: {
                    id: item.articleNumber
                }
            })
        }
    },
}
</script>
<style >
</style>